<template>
  <div class="header">
    <div class="container" >
       <div class="container-left" ><img src="@/assets/img/icon/logo.png" alt="青秧" @click="Controller('home')" > </div>
       <div class="container-middle" >
         <div class="container-search"  v-if="tabSearch.show" >
            <el-input placeholder="请输入内容" size="small" v-model="searchVal">
              <template #suffix>
                <i class="el-input__icon el-icon-search" @click="Controller('tab_search',tabSearch.func)" ></i>
              </template>
            </el-input>
        </div>
        <div class="qy-font-limits"  v-for="(item,index) in navigationList" :key="index" >
          <span class="container-tab" :class="{'navigationClick':index==navigationClick}" @click="Controller('tab',item.path,item.index)" >{{item.label}}</span>
        </div>
       </div>
       <div class="container-right" >
          <!-- 普通按钮 -->
          <div v-if="btnType == 'normal'" >
            <div class="btn-normal" v-for="(item,index) in tabFunList" :key="index" >
              <el-button size="mini" type="primary" plain @click="Controller('tab_fun',item.type,item.path,item.func)">{{item.name}}</el-button>
            </div>
          </div>
          <!-- 带弹层的按钮 -->
          <div v-if="btnType == 'pop'">
            <div v-for="(item,index) in tabFunList" :key="index" >
              <el-popover placement="bottom" width="400"  trigger="click">
                <div class="popver-box">
                  <div class="pover-title-one" >{{popver_title}}</div>
                  <div class="pover-title-two" >分类</div>
                  <div class="pover-option-list">
                    <div v-for="(item,index) in popver_option" :key="index" 
                    class="pover-option-list_item"  
                    :class="{'pover-option-click':index==clickIndex}"
                    @click="Controller('option',item,index)"
                    >{{item}}</div>
                  </div>
                  <div class="pover-option-submit" >
                    <el-button  type="primary" plain  @click="Controller('tab_btn',item.type,item.path,item.func)"
                      >确定并发布</el-button
                    >
                  </div>
                </div>
                <template #reference>
                  <el-button style="margin-right:15px" size="mini" type="primary" plain>{{item.name}}</el-button>
                </template>
              </el-popover>
            </div>
          </div>
          <!-- 列表选择按钮 -->
          <div v-if="btnType == 'list'" >
            <el-popover
              placement="bottom-end"
              :width="100"
              trigger="click"
            >
              <template #reference>
                <div class="btn-new" >
                  <i class="el-icon-circle-plus" ></i><span>新建</span>
                </div>  
              </template>
              <div class="user-box">
                <div class="user-box-item" v-for="(item,index) in tabFunList" :key="index" @click="Controller('tab_fun',item.type,item.path,item.func)"  >
                  <i class="el-icon-circle-plus-outline" ></i><span class="qy-padl10" >{{item.name}}</span>
                </div>
              </div>
            </el-popover>
          </div>
          <!-- 通知消息 -->
          <div class="btn-notice" ><i class="el-icon-bell" ></i></div>
          <!-- 用户模块 -->
          <div class="btn-avator" >
            <el-popover
              placement="top-start"
              :width="200"
              trigger="click"
            >
              <template #reference>
                <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
              </template>
              <div class="user-box">
                <div class="user-box-item qy-font-weight" >Keller</div>
                <div class="user-box-item user-box-line"><span class="user-box-gray" >升级会员享更多权益</span><span class="user-box-up" >立即升级</span></div>
                <div class="user-box-item"><i class="el-icon-user" ></i><span class="qy-padl10" @click="Controller('center')" >个人主页</span></div>
                <div class="user-box-item"><i class="el-icon-setting" ></i><span class="qy-padl10">账户设置</span></div>
                <div class="user-box-item"><i class="el-icon-refresh" ></i><span class="qy-padl10">English</span></div>
                <div class="user-box-item"><i class="el-icon-reading" ></i><span class="qy-padl10">帮助文档</span></div>
                <div class="user-box-item"><i class="el-icon-switch-button" ></i><span class="qy-padl10">退出登录</span></div>
              </div>
            </el-popover>
          </div>
       </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, computed } from "vue";
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  name: "qy-navigations",
  props:{
   //fun列表
   tabFunList:Array,
   //搜索
   //tabSearch:Object,
   //按钮类型
   btnType:String,
   //按钮弹层标题
   popver_title:String,
   //按钮弹层选项
   popver_option:Array
  },
  setup(props,{ emit }) {
    // 定义数据
    const state = reactive({
      tabSearch:{show:false,func:''},
      searchVal:'',
      clickIndex:7,
      articleType:'阅读',
    });
    const store = useStore()
    const router = useRouter()
    const navigationList = computed(()=>{
      return store.state.app.navigationList
    })
    const navigationClick = computed(()=>{
      return store.state.app.navigationClick
    })
    const Controller = ((param1,param2,param3,param4) => {
      switch(param1){
        case 'home':
          router.push({path:"/"})
        break;
        case 'tab':
          store.dispatch('app/navigationClick',param3)
          router.push({path:param2})
        break;
        case 'tab_fun': 
          if(param2 == 'link'){
            router.push(param3);
          } else if(param2 == 'func'){
            emit(param4); 
          }
        break;
        case 'tab_search':
          emit(param2,state.searchVal)
        break;
        case 'center':
          router.push('center/user/main')
        break;
        case "option":
          state.articleType = param2
          state.clickIndex = param3
        break;
        case "tab_btn":
          if(param2 == 'link'){
            router.push(param2)
          } else if(param2 == 'func'){
            emit(param4,state.articleType)
          }
        break;
        default: 
        break;
      }
    })
    return {
      ...toRefs(state),
      Controller,
      navigationList,
      navigationClick
    };
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variable.scss";
.navigationClick{
  color: $gray-weight;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  height: 60px;
  background: $white;
  border-bottom: 1px solid #e8e8e8;
  .container{
    width: 80vw;
    margin-left: 10vw;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .container .container-left{
    text-align: left;
    width: 256px;
    min-width: 256px;
    img{
      width: auto;
      height: 32px;
    }
  }
  .container .container-middle{
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding-left: 10px;
    width: calc(80vw - 256px - 280px);
    .container-search{
      margin-right: 10px;
    }
    .container-tab{
      font-size: 14px;
      padding: 0 14px;
      cursor: pointer;
    }
    .container-tab:hover{
      color: $gray-weight;
    }
  }
  .container .container-right{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 280px;
    cursor: pointer;
    .btn-new{
      font-size: 18px;
      padding: 0 5px;
      color: $green-weight;
      display: flex;
      align-items: center;
      span{
        font-size: 14px;
        margin-top: -2px;
        color: $black-light;
        padding: 0 10px;
      }
    }
    .btn-notice{
      padding-right: 20px;
      font-size: 18px;
    }
    .btn-normal{
      padding-right: 20px;
    }
  }
}
.user-box{
  .user-box-item{
    padding:10px;
    cursor: pointer;
  }
  .user-box-item:hover{
    color: $gray-weight;
  }
  .user-box-gray{
    color: $gray-weight;
    font-size: 12px;
  }
  .user-box-up{
    color: $blue-weight;
    font-size: 12px;
    padding-left: 10px;
  }
  .user-box-line{
    border-bottom: 1px solid $sidebar-border;
  }
}
// 选项确定
.pover-option-click{
  background-color:rgba(0, 186, 255,0.1);
  border:1px solid $blue-light !important;
  color: $blue-weight;
}
// 发布块样式
.popver-box {
  display: flex;
  flex-direction: column;
  padding: 10px;
  .pover-title-one{
    color: $gray-weight;
    font-size: 16px;
    font-weight: bolder;
    margin-bottom: 10px;
  }
  .pover-title-two{
    font-size: 14px;
    margin-bottom: 10px;
  }
  .pover-option-list{
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    flex-wrap: wrap;
    width: 300px;
    .pover-option-list_item{
      font-size: 12px;
      border: 1px solid $gray-light;  
      border-radius: 2px;
      padding: 5px 10px;
      margin: 5px 0;
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .pover-option-submit{
    text-align: center;
  }
}
</style>